import React, { Component } from 'react'
import '../assets/css/userinfo.scss'
import {fulldateFormat} from '../utils/dateFormat'
import MyDate from './MyDate'
import PropTypes from 'prop-types'
export default class UserInfo extends Component {
  constructor(props){
    super(props)
  }
  // static defaultProps={
  //   title:'暂无标题',
  //   name:'暂无名称',
  //   age:0,
  //   gender:1,
  //   hobby:['暂无兴趣'],
  //   birthday:new Date(),
  //   avatar:'http://old.woniuxy.com/page/img/head_picture/0.jpg'
  // }
  giveLike=()=>{
    console.log('点赞数',this.props.user.likeNum); 
    //如果传递进来的属性是一个非引用数据类型，组件是不能更改
    //如果传递进来的props是一个引用数据类型，我们可以更改这个引用数据类型中的属性
    //this.props.user.likeNum=this.props.user.likeNum+1
    //不能更改对象
    this.props.user={
      title:'教师信息',
      name:'翟吉喆',
      age:38,
      gender:1,
      hobby:['爱打游戏','爱读书'],
      birthday:new Date(1984,3,8),
      avatar:'http://old.woniuxy.com//page/image/userIcon/teacherIcon/zhaijizhe.jpg',
      likeNum:18
    }
    //通知页面强制更新
    this.forceUpdate()
  }
  render() {
    const {user}=this.props
    return (
      <div className='info-box'>
          <h3>{user.title}</h3> 
          <div>姓名:{user.name}</div>
          <div>年龄:{user.age}</div>
          <div>性别:{user.gender===1?'男':'女'}</div>
          <div>爱好：{user.hobby.join("、")}</div> 
          <div>生日:{fulldateFormat(user.birthday,"/")}</div>
          <div>
             <MyDate date={user.birthday}></MyDate>
          </div>
          <div>
            点赞数:{user.likeNum}
            <span style={{marginLeft:'10px',fontSize:'20px',color:'red'}} onClick={this.giveLike}>❤</span>
          </div>
          <div>
            <img src={user.avatar} alt="" className='avatar'/>
          </div>
      </div>
    )
  }
}